<template>
  <div>
    <header class="app-header">
      <a @click="back()" class="app-header-left" href="javascript:;">
        <i class="iconfont iconarrow-left"></i>返回</a
      >登录
    </header>
    <div class="login-wrapper">
      <h2>帐号登录</h2>
      <div class="sub">登录即表示同意“用户协议”和“隐私政策”</div>
      <form class="login-form" onsubmit="return false">
        <div class="form-item">
          <input
            ref="usernameIpt"
            v-model="form.username"
            type="text"
            placeholder="用户名"
          />
        </div>
        <div class="form-item">
          <input v-model="form.password" type="password" placeholder="密码" />
          <!-- <span>找回密码</span> -->
        </div>
        <button @click="login" class="red-btn mt-10" :disabled="isDisable">
          登录
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      form: {},
    };
  },
  mounted() {
    this.$refs.usernameIpt.focus();
  },
  methods: {
    ...mapActions("login", ["doLogin"]),
    back() {
      this.$router.back();
    },
    async login() {
      // 表单验证
      await this.doLogin(this.form);
      this.$router.push("/sz");
    },
  },
  computed: {
    isDisable() {
      return !(this.form.username && this.form.password);
    },
  },
};
</script>

<style scoped>
.login-wrapper {
  padding: 10px;
}

.login-wrapper h2 {
  font-weight: normal;
}

.login-wrapper .sub {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.login-form {
  margin-top: 50px;
}

.form-item {
  display: flex;
  border-bottom: 1px solid #a0a0a0;
  padding: 10px 0;
}

.form-item input {
  height: 30px;
  flex-grow: 1;
  font-size: 20px;
  text-indent: 5px;
  border: none;
  outline: none;
}

.red-btn {
  background-color: #990000;
  border: none;
  display: block;
  width: 100%;
  color: #fff;
  height: 50px;
  font-size: 20px;
  border-radius: 5px;
  outline: none;
}
</style>